<template>
	<view class="container" >
		<!-- 顶部导航 -->
		<view class="" style="position: fixed;top: 0;left: 0;z-index:999999999999999999999999999999999999999;"
			:style="{ opacity: headerOpt }">
			<view style="width: 750rpx;height: 128rpx;background: #ffffff;" class="">
				<image @click="Back()" src="/static/left.png" class="position-absolute"
					style="top:88rpx; left: 34rpx; width: 62rpx;height: 62rpx;" mode=""></image>
			</view>
			<view class="header-nav">
				<view class="header-nav-item" :class="{ 'header-nav-item-active': headerNav == 'goods' }"
					@click="navChange('goods')">
					<text>商品</text>
					<view class="header-nav-item-active-icon" v-if="headerNav == 'goods'">
						<image :src="$img_path('/home/detail/nav-active.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="header-nav-item" :class="{ 'header-nav-item-active': headerNav == 'rate' }"
					@click="navChange('rate')">
					<text>评价</text>
					<view class="header-nav-item-active-icon" v-if="headerNav == 'rate'">
						<image :src="$img_path('/home/detail/nav-active.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="header-nav-item" :class="{ 'header-nav-item-active': headerNav == 'detail' }"
					@click="navChange('detail')">
					<text>详情</text>
					<view class="header-nav-item-active-icon" v-if="headerNav == 'detail'">
						<image :src="$img_path('/home/detail/nav-active.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="header-nav-item" :class="{ 'header-nav-item-active': headerNav == 'tuijian' }"
					@click="navChange('tuijian')">
					<text>推荐</text>
					<view class="header-nav-item-active-icon" v-if="headerNav == 'tuijian'">
						<image :src="$img_path('/home/detail/nav-active.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="swiper-box position-relative">
			<swiper :autoplay="false" :interval="3000" :duration="500" :current="swiperIndex" @change="swiperChange">
				<swiper-item v-if="goodsInfo && goodsInfo.videos">
					<view class="swiper-item videoBox">
						<video id="bannerId" :enable-progress-gesture="false" :controls="false"
							:show-center-play-btn="false" :src="$img_base_url(goodsInfo.videos)"></video>
						<!-- #ifdef MP-WEIXIN -->
						<view class="play_icon" @click.stop="playVideo" v-if="playIcon">
							<image :src="$img_path('/mall/3.png')" mode="widthFix"></image>
						</view>
						<!-- #endif -->
					</view>
				</swiper-item>
				<swiper-item v-for="(item, i) in goodsInfo.images" :key="i">
					<view class="swiper-item" @click="openImg(goodsInfo.images,i)">
						<image :src="$img_base_url(item)" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<image  @click="Back()" src="/static/left.png" class="position-fixed"
				style="top:88rpx; left: 34rpx; width: 62rpx;height: 62rpx;" mode=""></image>
			<!-- <view class="dots">
        <view class="video viewbox" :class="swiperIndex == 0 ? 'select' : ''" @click="checkSwiper(0)">
          视频
        </view>
        <view class="img viewbox" :class="swiperIndex > 0 ? 'select' : ''" @click="checkSwiper(1)">
          图集
        </view>
      </view> -->
			<view v-if="!flag" class="idx">
				<view class="i">
					{{ swiperIndex + 1 }}
				</view>
				<view class="all">
					{{
            goodsInfo && goodsInfo.images
              ? goodsInfo.videos
                ? Number(goodsInfo.images.length) + 1
                : goodsInfo.images.length
              : 0
          }}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box-1">
				<view class="price">
					<view class="left-num">
						<view class="p-1">
							￥
							<text>
								{{ gPrice(minPrice)[0] }}
							</text>
							{{ gPrice(minPrice)[1] }}
						</view>
						<!-- <text style="line-height: 66rpx; color: #e72a2a" v-if="maxPrice">-</text>
						<view class="p-1" v-if="maxPrice">
							￥
							<text>
								{{ gPrice(maxPrice)[0] }}
							</text>
							{{ gPrice(maxPrice)[1] }}
						</view> -->
						<view class="n-p"> ￥{{ market_price }} </view>
					</view>
					<view class="r-text"> 销量{{ goodsInfo.sales || 0 }}件 </view>
				</view>
				<view class="name more-row" :style="{ '--row-num': 2 }">
					{{ goodsInfo.title || "" }}
				</view>
			</view>

			<view class="pt-list">
				<!-- <view class="spec" @click="selectSpec('select')"> -->
				<view class="spec" @click="openSpec()">
					<view class="left">
						<text>选择</text>
						<view class="spec-text">
							<!-- {{selectGood.join(',')}} ，1件 -->
							已选：请选择
						</view>
					</view>
					<image :src="$img_path('/common/icon_r.png')" mode="widthFix"></image>
				</view>
				<view class="logistics" @click="wuliuShow">
					<view class="left">
						<text>物流</text>
						<view class="spec-text" v-if="goodsInfo.freight">
							<text>{{
                goodsInfo && goodsInfo.freight.price == 0 ? "包运费" : goodsInfo.freight.price
              }}</text>
							<!-- <text>发货 XXX省XXX市 I 免运费/￥10.00</text>
							<text>现在付款，明天发货/48小时内发货</text> -->
						</view>
					</view>
					<image :src="$img_path('/common/icon_r.png')" mode="widthFix"></image>
				</view>
			</view>

			<!-- <view class="m-tabs">
        <text v-for="(item, i) in [1, 2, 3]" :key="i" :class="i == tabIndex ? 'select' : ''" @click="tab(i)"
          >1</text
        >
      </view> -->

			<view class="model-box pj-box m-sppj">
				<view class="title">
					<view class="l-text">
						商品评价<text>({{ statistics && statistics["total"] ? statistics["total"] : 0 }})</text>
					</view>
					<view class="r-i" @click="toEvaluate">
						<text>全部</text>
						<image :src="$img_path('/common/icon_r.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="pj-tag">
					<view class="t-item" :class="[commentTag == '' ? 'select' : '']" @click="pjTag('')">
						<text>全部</text>
					</view>
					<view class="t-item" :class="[commentTag == key ? 'select' : '']" v-for="(item, key) of c_tag"
						:key="key" @click="pjTag(key)">
						<text>{{ item }}</text>
						<text>（{{ statistics && statistics[key] ? statistics[key] : 0 }}）</text>
					</view>
				</view>
				<view class="pj-list">
					<view class="item" v-for="(item, i) in comment_list" :key="item.id">
						<view class="user">
							<view class="left">
								<image :src="$img_base_url(item.user.avatar)" mode="aspectFill"></image>
								<view class="name-star">
									<text>{{ item.user.nickname }}</text>
									<view class="star">
										<uni-rate allow-half color="#DDDDDD" size="26" activeColor="#F2CB51"
											:value="item.score" />
										<!-- <image v-for="(item,i) in 5" :key="i" :src="i<4 ? $img_path('/common/star_1.png') : $img_path('/common/star_2.png')" mode="widthFix"></image> -->
									</view>
								</view>
							</view>
							<view class="time">
								{{ $dayjs.unix(item.createtime).format("YYYY-MM-DD") }}
							</view>
						</view>
						<view class="con">
							<view class="text">
								{{ item.content }}
							</view>
							<view class="img">
								<view class="i-box" @click="preview(item.images)">
									<image :src="$img_base_url(item.images[0])" mode="aspectFill"></image>
									<text>{{ item.images.length }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="model-box info-box m-box" style="padding: 20rpx 0">
				<view class="title">
					<view class="l-text goods-detail-title"> 商品详情 </view>
				</view>
				<view class="con">
					<rich-text :nodes="goodsInfo.content || ''"></rich-text>
				</view>
			</view>

			<view class="other-goods">
				<view class="title  goods-detail-title"> 您可能还喜欢 </view>
				<view class="g-list">
					<view class="item" v-for="(item, i) in like_list" :key="i">
						<MallItemBox :styleType="1" :title_row="1" :goodsDetail="item"
							:imageStyle="{ width: '344rpx', height: '344rpx' }">
							<!-- <text slot="center" style="margin-top: 16rpx;display: block;">销量：1000</text>
							<view slot="tagList" class="tagList">
								<view class="tag-item">
									标签标签
								</view>
								<view class="tag-item">
									标签
								</view>
								<view class="tag-item">
									标签标签
								</view>
							</view> -->
						</MallItemBox>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-btn pb-con">
			<view class="b-box pb-con">
				<view style="padding-bottom: 20rpx;" class="con-box">
					<view class="left">
						<button class="cs_button" open-type="contact" session-from="weapp">
							<view class="i-box">
								<image :src="$img_base_url('/mine/7.png')" mode="widthFix"></image>
								<text>客服</text>
							</view>
						</button>

						<view class="i-box" @click="shareShow">
							<image :src="$img_base_url('/mine/8.png')" mode="widthFix"></image>
							<text>分享</text>
						</view>
						<view class="i-box" @click="followClick">
							<image v-if="goodsInfo.follow" :src="$img_base_url('/mine/6.png')" mode="widthFix"></image>
							<image v-else :src="$img_base_url('/mine/star_2.png')" mode="widthFix"></image>
							<!-- <text>100</text> -->
							<text>{{ goodsInfo.follow ? "取消" : "收藏" }}</text>
						</view>
					</view>

					<view class="right">
						<view class="a-box">
							<!-- <view class="l-b" @click="selectSpec('addCar')"> -->
							<view class="l-b" @click="openSpec('addCar')">
								<text>加入购物车</text>
							</view>
							<!-- <view class="r-b" @click="selectSpec('pay')"> -->
							<view class="r-b" @click="openSpec('pay')">
								<text>立即购买</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 分享 -->
		<popupBox ref="share" type="bottom" :isSlot="true">
			<view class="shareBox">
				<view class="title">
					<text>分享到</text>
					<!-- <image src="@/static/image/login_1.png" @click="$refs.share.close()" mode="widthFix"></image> -->
				</view>
				<view class="box">
					<view class="item" @click="shareClick('WXSceneSession')">
						<image :src="$img_path('/course/classify/1.png')" mode="widthFix"></image>
						<text>微信好友</text>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share"></button>
						<!-- #endif -->
					</view>
					<view class="item" @click="shareClick('WXSceneTimeline')">
						<image :src="$img_path('/course/classify/2.png')" mode="widthFix"></image>
						<text>朋友圈</text>
					</view>
					<view class="item" @click="createdImg()">
						<image :src="$img_path('course/classify/3.png')" mode="widthFix"></image>
						<text>生成海报</text>
					</view>
				</view>
				<view class="btn">
					<button @click="$refs.share.close()">取消</button>
				</view>
			</view>
		</popupBox>
		<!-- 海报弹窗 -->
		<popupBox ref="haibao" type="bottom" backgroundColor="#FFFFFF00" customClass="hbpopup" :isSlot="true">
			<view class="haibao">
				<view class="canvas_content">
					<image :src="canvas_img_url" mode="widthFix"></image>
				</view>

				<view class="shareBox hb_b">
					<view class="title">
						<text>分享当前图片到</text>
					</view>
					<view class="box">
						<view class="item" @click="saveCanvasImg()">
							<image :src="$img_path('course/classify/4.png')" mode="widthFix"></image>
							<text>保存图片</text>
						</view>
						<view class="item" @click="shareClick('WXSceneSession')">
							<image :src="$img_path('/course/classify/1.png')" mode="widthFix"></image>
							<text>微信好友</text>
							<!-- #ifdef MP-WEIXIN -->
							<button open-type="share"></button>
							<!-- #endif -->
						</view>
						<view class="item" @click="shareClick('WXSceneTimeline')">
							<image :src="$img_path('/course/classify/2.png')" mode="widthFix"></image>
							<text>朋友圈</text>
						</view>
					</view>
					<view class="btn">
						<button @click="$refs.haibao.close()">取消</button>
					</view>
				</view>
			</view>
		</popupBox>

		<!-- 物流 -->
		<popupBox ref="wuliu" type="bottom" backgroundColor="#FFFFFF" :isSlot="true">
			<view class="wl-box">
				<view class="title">
					<text>配送规则</text>
					<image :src="$img_path('/mall/15.png')" @click="$refs.wuliu.close()" mode="widthFix"></image>
				</view>
				<view style="    max-height: 500rpx;overflow: scroll;" class="content-text"
					v-html="articleinfo.content"> </view>
				<view class="kong"></view>
			</view>
		</popupBox>

		<view class="jiantou" v-if="pengyouquan" @click="pengyouquan = false">
			<image :style="{ top: 5 + 'px', right: jWidth + 'px' }" :src="$img_path('/course/jian.png')"
				mode="widthFix"></image>
			<view class="text"> 请点击这里 </view>
		</view>

		<!-- 规格选择 -->
		<goodsSelect ref="selectGoods" :selectGood="selectGood" :goodsInfo="goodsInfo" @submitOrder="submitOrder"
			@addCar="addCart"></goodsSelect>

		<!-- 选择规格 -->
		<select-spec style="z-index: 99999999999999999999999999;" ref="selectSpec" @change="change" :goodsInfo="goodsInfo"
			:specType="specType" @addToCart="addToCart" @buyNow="buyNow"></select-spec>

		<canvas canvas-id="offlineCanvas"
			style="width: 634px; height: 968px; position: fixed; z-index: -1; opacity: 0; background-color: #ffffff"></canvas>
		<view class="scroll-top" v-if="s_top && !flag" @click="toTop">
			<image :src="$img_path('/course/top.png')" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	const FormData = require("@/utils/formdata/index.js");
	import {
		goodsDetail,
		getCommentList,
		followApi,
		storageCart,
		getOrderGoodsList,
		goodesQrcode,
		getLikes,
	} from "@/utils/api/mallApi.js";
	import {
		article
	} from '@/utils/api/index.js'
	import canvas_img from "@/utils/canvas_img";
	import goodsSelect from "@/components/popup/goods-select.vue";
	import MallItemBox from "@/components/service-box/mall-item-box.vue";
	import popupBox from "@/components/popup/popup.vue";
	import {
		IMG_BASE_URL,
		BASE_URL
	} from "@/utils/env.js";
	import SelectSpec from "pagesMall/components/selectSpec.vue";
	export default {
		components: {
			MallItemBox,
			popupBox,
			goodsSelect,
			SelectSpec,
		},
		data() {
			return {
				s_top: false,
				jWidth: this.jWidth - 30,
				goods_id: null,
				videoDom: null,
				playIcon: true,
				swiperIndex: 0,

				canvas_img_url: "", //海报本地url
				pengyouquan: false, //朋友圈分享指引

				minPrice: "",
				maxPrice: "",
				market_price: "",
				goodsInfo: {},

				selectGood: [],

				c_tag: {
					good: "好评",
					pertinent: "中评",
					poor: "差评",
					figure: "有图",
				},
				commentTag: "", //good=好评,pertinent=中评,poor=差评,figure=有图
				statistics: {},
				comment_list: [],

				like_list: [],
				page: 1,
				last_page: 0,
				total: 0,
				contentText: {
					contentdown: "上滑加载更多",
					contentrefresh: "加载中",
					contentnomore: "没有更多了",
				},
				like_status: "",
				// 规格弹出类型
				specType: "addCar", //addCar加入购物车,pay立即购买
				tabIndex: 0,
				headerOpt: 0,
				headerNav: "goods",
				eleScrollTop: {
					comments: 0,
					goodsDetail: 0,
					other: 0
				},
				scrollTop: 0,
				articleinfo: {},
				flag: false

			};
		},
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop;

		// },
		watch: {
			scrollTop() {
				this.headerOpt = Math.min(1, this.scrollTop / 300);
				// console.log(this.headerOpt, 999)
				if (this.scrollTop < this.eleScrollTop.comments) {
					this.headerNav = "goods";
				} else if (
					this.scrollTop >= this.eleScrollTop.comments &&
					this.scrollTop < this.eleScrollTop.goodsDetail
				) {
					this.headerNav = "rate";
				} else if (
					this.scrollTop >= this.eleScrollTop.goodsDetail &&
					this.scrollTop < this.eleScrollTop.other
				) {
					this.headerNav = "detail";
				} else {
					this.headerNav = "tuijian";
				}
			},
		},
		computed: {
			getSelectGoods() {
				if (this.goodsInfo && this.goodsInfo.sku) {
					return this.goodsInfo.sku.filter((e) => {
						return this.compareArrays(e.difference, this.selectGood);
					})[0];
				}
			},
		},
		async onLoad(data) {
			this.goods_id = data.id;
			this.getDetail();
			this.getComment();
			this.getLikes();
			this.article()

			await this.$nextTick()
			setTimeout(() => {
				this.getEleScrollTop();
			}, 3000)
		},
		onPageScroll({
			scrollTop
		}) {
			console.log(scrollTop)
			this.scrollTop = scrollTop;
			if (scrollTop > 100) {
				this.s_top = true;
			} else {
				this.s_top = false;
			}
			console.log(this.s_top);
			console.log(this.headerNav);
		},
		onShow() {
			this.videoDom = uni.createVideoContext("bannerId");

		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.goodsInfo.name, //分享的标题
				imageUrl: this.$img_base_url(this.goodsInfo.image), //展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
				query: `pagesMall/goods/detail?id=${this.goods_id}`, //页面打开的传参
			};
		},
		// 分享到好友
		onShareAppMessage(res) {
			return {
				title: this.goodsInfo.name, //分享的标题
				imageUrl: this.$img_base_url(this.goodsInfo.image), //展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
				path: `pagesMall/goods/detail?id=${this.goods_id}`, //点击链接后跳转的页面，可以带参数
			};
		},
		// 滚动到底部
		onReachBottom(e) {
			if (this.page < this.last_page) {
				this.page++;
				this.getLikes();
			}
		},
		methods: {
			change(e){
				this.flag = e.show
				console.log(e,'changechangechangechangechange')
			},
			async article(type) {
				console.log(type, 'typetypetype')
				const {
					code,
					data
				} = await article({
					biaoshi: '配送规则'
				})
				if (code == 1) {
					this.articleinfo = data
					console.log(this.articleinfo.content)
				}
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			Back() {
				console.log(1)
				uni.navigateBack()
			},
			navChange(type) {
				this.headerNav = type;
				const scrollPositions = {
					goods: 0,
					rate: this.eleScrollTop.comments + 50,
					detail: this.eleScrollTop.goodsDetail + 50,
				};
				uni.pageScrollTo({
					scrollTop: scrollPositions[this.headerNav],
					duration: 300,
				});
			},
			getEleScrollTop() {
				const that = this;
				const query = uni.createSelectorQuery();

				// 评价内容
				query.select(".m-sppj").boundingClientRect();
				query.select(".m-box").boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.select(".other-goods").boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.exec((res) => {
					console.log("评价元素距离页面顶部的距离", res[0]);
					console.log("详情元素距离页面顶部的距离", res[1]);
					console.log("详情元素距离页面顶部的距离", res[2]);
					that.eleScrollTop.comments = res[0].top - 50;
					that.eleScrollTop.goodsDetail = res[1].top - 50;
					that.eleScrollTop.other = res[2].top - 50;
				});
			},
			playVideo() {
				this.videoDom.play();
				this.playIcon = false;
			},

			// 猜你喜欢
			getLikes() {
				this.like_status = "contentrefresh";
				getLikes({
					pages: "cart",
					page: this.page,
				}).then((res) => {
					this.last_page = res.data.last_page;
					this.total = res.data.total;
					if (this.page == 1) {
						this.like_list = res.data.data;
					} else {
						this.like_list = [...res.data.data, ...this.like_list];
					}
					if (this.page < res.data.last_page) {
						this.like_status = "contentdown";
					} else {
						this.like_status = "contentnomore";
					}
				});
			},
			// 商品详情
			getDetail() {
				let formData = new FormData();
				formData.append("id", this.goods_id);
				uni.showLoading();
				goodsDetail({
					id: this.goods_id
				}).then((res) => {
					uni.hideLoading();
					this.goodsInfo = res.data;
					this.sku = res.data.sku;
					this.spu = res.data.spu;

					// 价格区间
					if (res.data.sku.length == 0) {
						this.minPrice = res.data.price;
						this.market_price = res.data.price;
					} else {
						let price = [],
							market_price = [];
						for (let value of res.data.sku) {
							price.push(value.price);
							market_price.push(value.market_price);
						}
						let minPrice = Math.min.apply(null, price),
							maxPrice = Math.max.apply(null, price),
							maxMarketPrice = Math.max.apply(null, market_price);
						this.minPrice = Number(minPrice).toFixed(2);
						this.maxPrice = minPrice == maxPrice ? "" : Number(maxPrice).toFixed(2);
						this.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
						// res.data.interval_price = minPrice == maxPrice ? Number(minPrice).toFixed(2) : ( minPrice + '-' + Number(maxPrice).toFixed(2) ); //区间价格
						// res.data.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
					}
					// this.selectGood = res.data.sku[0]
				});
			},
			// 评论列表
			getComment() {
				let formData = new FormData();
				// formData.append('id',this.goods_id)
				// formData.append('tag',this.commentTag)
				let data = {
					id: this.goods_id,
					tag: this.commentTag,
				};
				// getCommentList(formData.getData()).then(res=>{
				getCommentList(data).then((res) => {
					this.comment_list = res.data.comment.data;
					this.statistics = res.data.statistics;
				});
			},
			//
			pjTag(str) {
				this.commentTag = str;
				this.getComment();
			},

			// 商品收藏/取消收藏
			followClick() {
				uni.showLoading();
				followApi({
					id: this.goods_id
				}).then((res) => {
					uni.showToast({
						title: res.data ? "收藏成功" : "取消收藏成功",
						icon: "none",
					});
					this.goodsInfo.follow = res.data;
					// uni.hideLoading();
					// this.getDetail();
				});
			},

			// 加入购物车
			addCart(data) {
				storageCart({
					data: {
						goods_id: this.goods_id,
						shop_id: this.goodsInfo.shop_id,
						...data,
					},
					type: "add",
				}).then((res) => {
					console.log(res, "-");
					uni.showToast({
						title: "加入购物车成功",
						icon: "none",
					});
					// this.getDetail()
					this.$refs.selectGoods.close();
				});
			},

			// 查看图片
			preview(urls) {
				uni.previewImage({
					urls,
				});
			},

			checkSwiper(i) {
				this.swiperIndex = i;
				this.videoDom.pause();
				this.playIcon = true;
			},
			swiperChange(val) {
				let {
					current
				} = val.detail;
				this.swiperIndex = current;
				this.videoDom.pause();
				this.playIcon = true;
				// console.log(current,'-')
			},

			selectSpec(type) {
				this.$refs.selectGoods.open(type);
			},

			toEvaluate() {
				uni.navigateTo({
					url: "/pagesMall/evaluate/evaluate?id=" + this.goods_id,
				});
			},

			shareShow() {
				this.$refs.share.open();
			},

			shareClick(text) {
				if (text == "WXSceneTimeline") {
					console.log("-------");
					this.pengyouquan = true;
				}
			},

			// 生成海报
			async createdImg() {
				// uni.showLoading({
				//   title: "生成中...",
				// });
				let market_price = 0;
				if (this.goodsInfo && this.goodsInfo.sku && this.goodsInfo.sku.length > 0) {
					market_price = this.goodsInfo.sku[0].market_price;
				}
				this.getQrcodeImg().then((qrcode) => {
					let data = {
						url: this.$img_base_url(this.goodsInfo.image),
						salePrice: this.goodsInfo.price,
						market_price: market_price,
						name: this.goodsInfo.title,
						sales: this.goodsInfo.sales,
						qrcode: qrcode,
					};
					canvas_img.initCanvas("offlineCanvas", this, data).then((res) => {
						uni.canvasToTempFilePath({
							canvasId: "offlineCanvas",
							// x: 0,
							// y: 0,
							// width: 634,
							// height: 963,
							success: (res) => {
								console.log(res);
								this.canvas_img_url = res.tempFilePath;
								uni.hideLoading();
								this.$refs.haibao.open();
							},
						});
					});
				});
			},

			getQrcodeImg() {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: BASE_URL +
							`/api/wanlshop/common/qrcode?width=80&page=pagesMall/goods/detail?id=${this.goods_id}&qr=g`,
						success: (data) => {
							resolve(data.path);
						},
						fail: (err) => {
							reject(err);
							uni.showToast({
								title: "海报生成失败",
								mask: false,
								duration: 2000,
								icon: "none",
							});
							uni.hideLoading();
						},
					});
				});
			},

			saveCanvasImg() {
				uni.saveImageToPhotosAlbum({
					filePath: this.canvas_img_url,
					success: function(res) {
						var savedFilePath = res.savedFilePath;
					},
				});
			},

			wuliuShow() {
				this.$refs.wuliu.open();
			},

			// 打开图片预览
			openImg(item, i) {
				console.log(item)

				let array = item.map(item => `${BASE_URL}${item}`)
				// let img = `${BASE_URL}${item}`
				uni.previewImage({
					urls: array,
					current: i,
				})
			},

			submitOrder(data) {
				// getOrderGoodsList({
				// 	data:{
				// 		...data,
				// 		goods_id:this.goods_id
				// 	}
				// }).then(res=>{

				// })
				let arr = [{
					...data,
					goods_id: this.goods_id
				}];
				uni.navigateTo({
					url: `/pagesMall/order/confirm_order?id=${this.goods_id}&data=${JSON.stringify(arr)}`,
				});
			},

			// 打开选择规格
			openSpec(type) {
				this.specType = type;
				console.log(type);
				this.$refs.selectSpec.$refs.popup.open();
			},

			// 加入购物车
			addToCart(e) {
				storageCart({
					data: {
						goods_id: this.goods_id,
						shop_id: this.goodsInfo.shop_id,
						number: e.number,
						sku_id: e.id,
					},
					type: "add",
				}).then(() => {
					this.$refs.selectSpec.close();
					uni.showToast({
						title: "加入购物车成功",
						icon: "none",
					});
				});
			},
			buyNow(e) {
				this.$refs.selectSpec.close();
				let data = e;
				data.sku_id = e.id;
				let arr = [{
					...data,
					goods_id: this.goods_id
				}];
				uni.navigateTo({
					url: `/pagesMall/order/confirm_order?id=${this.goods_id}&data=${JSON.stringify(arr)}`,
				});
			},
			tab(i) {
				this.tabIndex = i;
			},
			createSelectorQuery() {
				uni
					.createSelectorQuery()
					.select(".m-tabs")
					.boundingClientRect(function(rect) {
						console.log(rect.top); // 距离顶部的距离
					})
					.exec();
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "detail.scss";

	.scroll-top {
		position: fixed;
		bottom: 200rpx;
		right: 22rpx;
		z-index: 9999;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.goods-detail-title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-detail-title::before {
		content: "";
		width: 100rpx;
		height: 1rpx;
		background: #333;
		margin-right: 20rpx;
	}

	.goods-detail-title::after {
		content: "";
		width: 100rpx;
		height: 1rpx;
		background: #333;
		margin-left: 20rpx;
	}

	.m-tabs {
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.select {
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select::before {
		content: "";
		width: 40rpx;
		height: 8rpx;
		background: #ff2d00;
		border-radius: 4rpx;
		position: absolute;
		top: calc(100% + -10rpx);
		left: 50%;
		transform: translateX(-50%);
	}

	.header-nav {
		width: 100%;

		padding: 24rpx 22rpx;
		background-color: transparent;
		z-index: 1;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
	}

	.header-nav-item {
		font-weight: bold;
		font-size: 32rpx;
		color: #999999;

	}

	.header-nav-item-active {
		color: #333333;
		position: relative;
	}

	.header-nav-item-active-icon {
		width: 38rpx;
		height: 12rpx;

		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -12rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>